<script setup lang="ts">
import { ref, onDeactivated, onActivated, inject } from "vue";
const message = ref("Error");

const theme = inject("theme");
// xx
onActivated(() => {
  console.log("Error onActivated");
});
onDeactivated(() => {
  console.log("Error onDeactivated");
});
</script>
<template>
  <div class="mess" :class="`mess_${theme}`">
    {{ message }}
  </div>
</template>

<style scoped>
.mess {
  border: 1px solid black;
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}
.mess_dark {
  background-color: black;
  color: white;
}
.mess_light {
  background-color: white;
  color: black;
}
</style>
